<template>
  <div class="app-container">
    <div class="module-title">
      <svg-icon icon-class="money" style="font-size:28px;margin-right:8px;"/>
      <span>新增应付款明细</span>
      <span class="module-desc">添加新的应付款明细记录</span>
    </div>
    
    <div class="module-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="payable-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据类型" prop="documentType">
              <el-select 
                v-model="form.documentType" 
                placeholder="请选择单据类型" 
                style="width: 100%"
                clearable
              >
                <el-option label="1：采购入库" :value="1" />
                <el-option label="2：退货入库" :value="2" />
                <el-option label="3：其他入库" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库单号" prop="entryCode">
              <el-input 
                v-model="form.entryCode" 
                placeholder="请输入入库单号"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据日期" prop="documentDate">
              <el-date-picker 
                v-model="form.documentDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择单据日期"
                style="width: 100%"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input 
                v-model="form.supplierName" 
                placeholder="请输入供应商名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数量" prop="quantity">
              <el-input-number 
                v-model="form.quantity" 
                :min="0"
                :precision="0"
                placeholder="请输入数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select 
                v-model="form.paymentMethod" 
                placeholder="请选择付款方式" 
                style="width: 100%"
                clearable
              >
                <el-option label="现金" value="现金" />
                <el-option label="银行转账" value="银行转账" />
                <el-option label="支票" value="支票" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="税额" prop="taxAmount">
              <el-input-number 
                v-model="form.taxAmount" 
                :min="0"
                :precision="2"
                placeholder="请输入税额"
                style="width: 100%"
                @change="calculateBalance"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应付金额" prop="payableAmount">
              <el-input-number 
                v-model="form.payableAmount" 
                :min="0"
                :precision="2"
                placeholder="请输入应付金额"
                style="width: 100%"
                @change="calculateBalance"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="已付金额" prop="paidAmount">
              <el-input-number 
                v-model="form.paidAmount" 
                :min="0"
                :precision="2"
                placeholder="请输入已付金额"
                style="width: 100%"
                @change="calculateBalance"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="应付余额" prop="balanceAmount">
              <el-input 
                v-model="form.balanceAmount" 
                placeholder="自动计算"
                disabled
                class="balance-input"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select 
                v-model="form.status" 
                placeholder="请选择状态" 
                style="width: 100%"
                clearable
              >
                <el-option label="待付款" value="待付款" />
                <el-option label="部分付款" value="部分付款" />
                <el-option label="已付款" value="已付款" />
                <el-option label="已取消" value="已取消" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input 
                v-model="form.remark" 
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24" class="form-actions">
            <el-button type="primary" @click="submitForm" :loading="submitLoading">
              <i class="el-icon-check"></i> 保存
            </el-button>
            <el-button @click="cancel">
              <i class="el-icon-close"></i> 取消
            </el-button>
            <el-button @click="resetForm">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addPayable } from "@/api/payable/payable"


export default {
  name: "PayableAdd",
  data() {
    return {
      // 提交加载状态
      submitLoading: false,
      // 表单参数
      form: {
        documentType: null,
        entryCode: null,
        documentDate: null,
        supplierName: null,
        quantity: 0,
        paymentMethod: null,
        taxAmount: 0,
        payableAmount: 0,
        paidAmount: 0,
        balanceAmount: 0,
        status: '待付款',
        remark: null
      },
      // 表单校验
      rules: {
        documentType: [
          { required: true, message: "单据类型不能为空", trigger: "change" }
        ],
        entryCode: [
          { required: true, message: "入库单号不能为空", trigger: "blur" },
          { min: 3, max: 50, message: "入库单号长度在 3 到 50 个字符", trigger: "blur" }
        ],
        documentDate: [
          { required: true, message: "单据日期不能为空", trigger: "blur" }
        ],
        supplierName: [
          { required: true, message: "供应商名称不能为空", trigger: "blur" },
          { min: 2, max: 100, message: "供应商名称长度在 2 到 100 个字符", trigger: "blur" }
        ],
        quantity: [
          { required: true, message: "数量不能为空", trigger: "blur" },
          { type: "number", min: 0, message: "数量必须大于等于0", trigger: "blur" }
        ],
        paymentMethod: [
          { required: true, message: "付款方式不能为空", trigger: "change" }
        ],
        taxAmount: [
          { type: "number", min: 0, message: "税额不能为负数", trigger: "blur" }
        ],
        payableAmount: [
          { required: true, message: "应付金额不能为空", trigger: "blur" },
          { type: "number", min: 0, message: "应付金额必须大于等于0", trigger: "blur" }
        ],
        paidAmount: [
          { required: true, message: "已付金额不能为空", trigger: "blur" },
          { type: "number", min: 0, message: "已付金额必须大于等于0", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
        remark: [
          { max: 500, message: "备注长度不能超过 500 个字符", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    /** 计算应付余额 */
    calculateBalance() {
      const payable = parseFloat(this.form.payableAmount) || 0
      const paid = parseFloat(this.form.paidAmount) || 0
      this.form.balanceAmount = Math.max(0, payable - paid).toFixed(2)
    },
    
    /** 验证已付金额 */
    validatePaidAmount() {
      const payable = parseFloat(this.form.payableAmount) || 0
      const paid = parseFloat(this.form.paidAmount) || 0
      
      if (paid > payable) {
        this.$message.warning('已付金额不能超过应付金额')
        this.form.paidAmount = payable
        this.calculateBalance()
      }
    },
    
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 验证已付金额不能超过应付金额
          const payable = parseFloat(this.form.payableAmount) || 0
          const paid = parseFloat(this.form.paidAmount) || 0
          
          if (paid > payable) {
            this.$message.error("已付金额不能超过应付金额")
            return
          }
          
          this.submitLoading = true
          addPayable(this.form).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.submitLoading = false
            this.$router.back()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    
    /** 取消按钮 */
    cancel() {
      this.$router.back()
    },
    
    /** 重置表单 */
    resetForm() {
      this.$refs["form"].resetFields()
      this.form = {
        documentType: null,
        entryCode: null,
        documentDate: null,
        supplierName: null,
        quantity: 0,
        paymentMethod: null,
        taxAmount: 0,
        payableAmount: 0,
        paidAmount: 0,
        balanceAmount: 0,
        status: '待付款',
        remark: null
      }
      this.calculateBalance()
    }
  },
  
  mounted() {
    this.calculateBalance()
  },
  
  watch: {
    'form.paidAmount': function() {
      this.validatePaidAmount()
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/module-card.scss";

.module-title {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #2980b9;
  margin-bottom: 18px;
  
  .module-desc {
    font-size: 14px;
    color: #888;
    font-weight: 400;
    margin-left: 18px;
  }
}

.payable-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  
  .el-form-item {
    margin-bottom: 24px;
  }
  
  .el-input-number {
    width: 100%;
  }
  
  .balance-input {
    .el-input__inner {
      background-color: #f5f7fa;
      color: #e74c3c;
      font-weight: 700;
      font-size: 16px;
    }
  }
  
  .form-actions {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    
    .el-button {
      margin: 0 10px;
      padding: 12px 24px;
      font-size: 14px;
      
      i {
        margin-right: 5px;
      }
    }
  }
}

.el-input-group__prepend {
  background: #f0f4fa;
  color: #2980b9;
  font-weight: 600;
  border-color: #dbeafe;
}

.el-textarea__inner {
  border-color: #dbeafe;
  
  &:focus {
    border-color: #2980b9;
  }
}

.el-input-number {
  .el-input__inner {
    text-align: left;
  }
}

.el-select {
  width: 100%;
}
</style> 